<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像去雾应用</title>
    <style>
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #166088;
            --background-color: #f5f7fa;
            --card-color: #ffffff;
            --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--background-color);
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px 0;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border-radius: 10px;
            box-shadow: var(--shadow);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .main-content {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        
        .image-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }
        
        .image-box {
            flex: 1;
            min-width: 300px;
            background-color: var(--card-color);
            border-radius: 10px;
            padding: 20px;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }
        
        .image-box:hover {
            transform: translateY(-5px);
        }
        
        .image-box h2 {
            text-align: center;
            color: var(--secondary-color);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary-color);
        }
        
        .image-display {
            width: 100%;
            height: 300px;
            background-color: #f0f0f0;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-bottom: 15px;
            border: 1px dashed #ccc;
        }
        
        .image-display img {
            max-width: 100%;
            max-height: 100%;
            display: block;
            object-fit: contain;
        }
        
        .placeholder {
            color: #888;
            font-size: 1.2rem;
        }
        
        .button-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 12px 25px;
            font-size: 1.1rem;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }
        
        .btn-upload {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-dehaze {
            background: linear-gradient(135deg, #3a9d5c, #2a7d45);
            color: white;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
        
        .btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .btn:active:not(:disabled) {
            transform: translateY(1px);
        }
        
        .icon {
            width: 20px;
            height: 20px;
        }
        
        .upload-form {
            display: none;
        }
        
        footer {
            margin-top: 30px;
            text-align: center;
            color: #888;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .image-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>图像去雾处理系统</h1>
            <p>上传图片并进行专业去雾处理</p>
        </header>
        
        <div class="main-content">
            <div class="image-container">
                <div class="image-box">
                    <h2>原图</h2>
                    <div class="image-display">
                        {% if filename %}
                            <img src="{{ url_for('static', filename='uploads/' + filename) }}" alt="原图">
                        {% else %}
                            <p class="placeholder">请上传图片</p>
                        {% endif %}
                    </div>
                </div>
                
                <div class="image-box">
                    <h2>去雾图</h2>
                    <div class="image-display">
                        {% if dehazed_filename %}
                            <img src="{{ url_for('static', filename='results/' + dehazed_filename) }}" alt="去雾结果">
                        {% else %}
                            <p class="placeholder">点击"去雾"按钮处理图片</p>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <div class="button-container">
                <button class="btn btn-upload" onclick="document.getElementById('fileInput').click()">
                    <svg class="icon" viewBox="0 0 24 24" fill="white">
                        <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
                    </svg>
                    上传图片
                </button>
                
                <form method="post" action="/dehaze" id="dehazeForm">
                    {% if filename %}
                        <input type="hidden" name="filename" value="{{ filename }}">
                        <button type="submit" class="btn btn-dehaze">
                            <svg class="icon" viewBox="0 0 24 24" fill="white">
                                <path d="M20 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
                            </svg>
                            去雾处理
                        </button>
                    {% else %}
                        <button class="btn btn-dehaze" disabled>
                            <svg class="icon" viewBox="0 0 24 24" fill="white">
                                <path d="M20 5h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
                            </svg>
                            请先上传图片
                        </button>
                    {% endif %}
                </form>
                
                <form method="post" action="/upload" enctype="multipart/form-data" class="upload-form">
                    <input id="fileInput" type="file" name="file" accept=".png,.jpg,.jpeg,.gif">
                </form>
            </div>
        </div>
        
        <footer>
            <p>图像去雾处理系统 © 2023</p>
        </footer>
    </div>
    
    <script>
        // 当用户选择文件后自动提交表单
        document.getElementById('fileInput').addEventListener('change', function() {
            if (this.files.length > 0) {
                document.querySelector('.upload-form').submit();
            }
        });
        
        // 添加去雾处理时的加载提示
        const dehazeForm = document.getElementById('dehazeForm');
        if (dehazeForm) {
            dehazeForm.addEventListener('submit', function() {
                const button = dehazeForm.querySelector('button[type="submit"]');
                if (button) {
                    button.disabled = true;
                    button.innerHTML = `
                        <div class="spinner" style="display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,0.3);border-radius:50%;border-top-color:white;animation:spin 1s linear infinite"></div>
                        正在处理...
                    `;
                    
                    // 显示处理中的提示
                    const resultDisplay = document.querySelector('.image-box:nth-child(2) .image-display');
                    if (resultDisplay) {
                        resultDisplay.innerHTML = '<p class="placeholder">处理中，请稍候...</p>';
                    }
                }
            });
        }
    </script>
</body>
</html>